<template>
  <div id="app">
    <el-button
      type="success"
      style="margin:20px 50px;"
      @click="handlerAddPerssion"
      >添加权限</el-button
    >
    <el-table
      :data="perssionList"
      style="width: 95%;margin: 20px auto;"
      row-key="id"
      border
      :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        prop="name"
        label="导航名称"
        width="480"
      ></el-table-column>
      <el-table-column
        prop="parentId"
        label="上级ID"
        width="180"
      ></el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="sortId" label="排序 " sortable></el-table-column>
      <el-table-column prop="url" label="导航标识"></el-table-column>
      <el-table-column prop="create_time" label="添加时间"></el-table-column>
      <el-table-column prop="address" label="操作" width="350" fixed="right">
        <template>
          <div>
            <el-button size="small">添加页面</el-button>
            <el-button type="primary" size="small">修改菜单</el-button>
            <el-button type="danger" size="small">删除菜单</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="perssionQuery.pageSize"
        :current-page="perssionQuery.pageNumber"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        class="management_page"
      ></el-pagination>
      <!-- 添加 权限-->
      <el-dialog
        :title="addPerssionName == '菜单' ? '添加菜单' : '添加页面'"
        :visible.sync="addperssiondialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          :model="addPerssionForm"
          :rules="addPerssionRule"
          ref="addPerssionRef"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="列表类型" prop="resource">
            <el-radio-group
              v-model="addPerssionForm.resource"
              @change="handlerChange"
            >
              <el-radio label="菜单"></el-radio>
              <el-radio label="页面"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :label="addPerssionName == '菜单' ? '菜单名称 :' : '页面名称 :'"
            prop="name"
          >
            <el-input v-model="addPerssionForm.name"></el-input>
          </el-form-item>
          <el-form-item
            :label="addPerssionName == '菜单' ? '菜单排序 :' : '页面排序 :'"
            prop="sortId"
          >
            <el-input v-model="addPerssionForm.sortId"></el-input>
          </el-form-item>
          <el-form-item
            :label="addPerssionName == '菜单' ? '菜单标识 :' : '路由导航 :'"
            prop="identification"
          >
            <el-input v-model="addPerssionForm.identification"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addperssiondialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { powerSel } from "../../utils/api";
export default {
  data() {
    return {
      // 权限列表
      perssionList: [],
      //  权限分页
      perssionQuery: {
        roleId: "",
        pageNumber: 1,
        pageSize: 10
      },
      // 总条数
      count: 0,
      // 添加权限的弹框
      addperssiondialogVisible: false,
      addPerssionForm: {
        name: "",
        sortId: "",
        identification: ""
      },
      addPerssionRule: {
        name: [{ required: true, message: "请输入页面名称", trigger: "blur" }],
        sortId: [
          { required: true, message: "请输入页面排序", trigger: "blur" }
        ],
        identification: [
          { required: true, message: "请选择路由导航", trigger: "blur" }
        ]
      },
      // 添加权限被选中的单选框
      addPerssionName: "菜单"
      // 拿到被选中父类id
    };
  },
  methods: {
    // 获取权限列表
    getperssionList() {
      this.postRequest(powerSel, this.perssionQuery).then(res => {
        if (res.code == 200) {
          this.perssionList = res.data.data;
          this.count = res.data.count;
        }
      });
    },
    handlerAddPerssion() {
      this.addperssiondialogVisible = !this.addperssiondialogVisible;
    },
    // 分页
    handleSizeChange(val) {
      this.personRoleQuery.pageSize = val;
      this.getperssionList();
    },
    handleCurrentChange(val) {
      this.personRoleQuery.pageNumber = val;
      this.getperssionList();
    },
    // 添加权限中 单选框的事件
    handlerChange(val) {
      this.addPerssionName = val;
    },
    // 点击表格中复选框拿到父类id
    handleSelectionChange(val) {
      // console.log(val)
    },
    handleClose() {}
  },
  created() {
    this.getperssionList();
  }
};
</script>
